<template>
  <div>
    <van-nav-bar
      title="选择地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      @add="onAdd"
      @edit="onEdit"
      @select="onSelect"
    />
    <div v-if="!showAddressList" class="addressNone" @click="onAdd()">
      添加地址
    </div>

    <!-- 添加地址 -->
    <div>
      <van-popup v-model="showEdit" position="right" class="showEdit">
        <div v-if="sign == 1">
          <van-nav-bar
            title="编辑地址"
            left-text="返回"
            right-text="删除"
            left-arrow
            @click-left="hidEdit()"
            @click-right="onDelete()"
          />
        </div>
        <div v-else>
          <van-nav-bar
            title="新增地址"
            left-text="返回"
            left-arrow
            @click-left="hidEdit()"
          />
        </div>
        <van-cell-group>
          <van-field
            v-model="addressInfo.name"
            label="名字"
            placeholder="请输入名字"
          />
          <van-field
            v-model="addressInfo.mobile"
            label="手机号"
            placeholder="请输入手机号"
          />
          <van-field
            v-model="addressInfo.addressArea"
            :readonly="readonly"
            label="地址"
            placeholder="选择地址"
            @click="showChoseArea()"
          />
          <van-field
            v-model="addressInfo.address"
            label="详细地址"
            type="textarea"
            placeholder="请输入详细地址"
            rows="1"
            autosize
          />
          <van-field
            v-model="addressInfo.zip"
            label="邮编"
            placeholder="请输入邮编"
          />
        </van-cell-group>
        <div class="save-address">
          <van-button type="primary" class="save" @click="onSave()">保存</van-button>
        </div>
        <!-- 选择省区 -->
        <div v-if="showArea" class="area">
          <van-area value="110101" :area-list="areaList" :columns-num="3" @confirm="onConfirm" @cancel="onCancel"/>
        </div>
        <div v-if="showArea" class="areaShadow" @click.stop="onCancel()"></div>
      </van-popup>
    </div>
  </div>
</template>

<script>

import request from '../../../static/request.js'
import area from '../../../static/area.js'
import { Notify } from 'vant'
import { AddressList } from 'vant'
import { AddressEdit } from 'vant';
import { Toast } from 'vant'
import { Popup } from 'vant';
import { Area } from 'vant';

export default {
  data() {
    return {
      chosenAddressId: '1',
      list: [],
      showAddressList: true,
      readonly: true,
      // 编辑地址
      showEdit: false,
      // 选择省市区显示
      showArea: false,
      addressInfo: {
        name: '',
        address: '',
        zip: '',
        mobile: '',
        addressArea: ''
      },
      areaList: area, // 省市区格式
      sign: 0, //  0是新增地址，1是编辑地址
      areaValue: '', // 选择的省市区

      addressId: '', //修改ID时使用
    }
  },
  created(){
    // 请求地址列表
    this.getAddressList()
    console.log(area)
  },

  methods: {
    // 请求地址列表
    getAddressList(){
      request({
        url: '?controller=theapi&action=address_list',
        method: 'get'
      }).then(res=>{
        console.log(res)
        if(res.data.data.length == 0){
          this.showAddressList = false
          return
        }
        let list = []
        res.data.data.forEach((item, index)=>{
          console.log(item)
          let obj = {
            id: item.id,
            name: item.accept_name,
            tel: item.mobile,
            address: `${item.chinese.province} ${item.chinese.city} ${item.chinese.area} ${item.address}`,
            addressArea: `${item.chinese.province} ${item.chinese.city} ${item.chinese.area}`,
            addressM: `${item.address}`,
            zip: item.zip,
            province_val: item.chinese.province,
            city_val: item.chinese.city,
            area_val: item.chinese.area,
            province: item.province,
            city: item.city,
            area: item.area
          }
          list.push(obj)
        })
        this.list = list
      })
    },

    onClickLeft() {
      this.$router.go(-1)
    },
    // 选中后返回，将地址的ID缓存，在目标页读取
    onSelect(item, index){
      localStorage.setItem('localStorageAddress',JSON.stringify(item))
      this.$router.go(-1)
    },

    // 地址
    onAdd() {
      Toast('新增地址');
      this.showEdit = true
      this.sign = 0
      this.addressInfo= {
        name: '',
        address: '',
        zip: '',
        mobile: '',
        addressArea: ''
      }
    },

    onEdit(item, index) {
      console.log(item)
      this.showEdit = true
      this.sign = 1
      this.addressId = item.id
      let addressInfo = {
        name: this.list[index].name,
        address: this.list[index].addressM,
        mobile: this.list[index].tel,
        addressArea: this.list[index].addressArea,
        zip: this.list[index].zip
      }
      this.addressInfo = addressInfo
      this.areaValue = [{code:this.list[index].province},{code:this.list[index].city},{code:this.list[index].area}]
    },

    // 删除地址
    onDelete() {
      Toast('delete');
      request({
        url: '?controller=theapi&action=del_address',
        method: 'get',
        params: {
          id: this.addressId
        }
      }).then(res=>{
        this.getAddressList()
        this.showEdit = false
        Notify({
          message: '删除地址成功',
          duration: 1000,
          background: '#F52E67'
        })
      })
    },
    hidEdit(){
      this.showEdit = false
    },
    showChoseArea(){
      this.showArea = true
    },
    onConfirm(e){
      this.addressInfo.addressArea = `${e[0].name} ${e[1].name} ${e[2].name}`,
      this.areaValue = e
      this.showArea = false
    },
    onCancel(){
      this.showArea = false
    },
    // 添加地址
    // 添加地址
    onSave() {
      if(this.addressInfo.name == ''){
        this.nameError = '请输入名字'
        Toast('请输入名字')
        return
      }
      if(!(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.addressInfo.mobile))){
        this.mobileError = true
        Toast('请输入正确的电话号码')
        return
      }else{
        this.mobileError = false
      }
      if(this.addressInfo.addressArea == ''){
        Toast('请选择省市区')
        return
      }
      if(this.addressInfo.address == ''){
        Toast('请输入详细地址')
        return
      }
      if(this.addressInfo.zip == ''){
        Toast('请输入邮编')
        return
      }
      let reqData = {
        accept_name: this.addressInfo.name,
        address: this.addressInfo.address,
        zip: this.addressInfo.zip,
        mobile: this.addressInfo.mobile,
        // 这个地方需要接口
        province: this.areaValue[0].code, //hank
        city: this.areaValue[1].code,
        area: this.areaValue[2].code
      }
      if(this.sign == 0){
        console.log("新增地址")
      }else{
        console.log("修改地址")
        reqData.id = this.addressId
      }
      request({
        url: '?controller=theapi&action=add_address',
        method: 'get',
        params: reqData
      }).then(res=>{
        if(res.data.return_code == 'success'){
          Notify({
            message: '成功',
            duration: 1000,
            background: '#F52E67'
          })
          this.getAddressList()
          this.showEdit = false
        }
      }).catch(err=>{
        console.log(err)
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.addressNone{
  position: absolute;
  width: 100%;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
  color: #B3B5B8
}
.van-nav-bar__right{
  >.van-nav-bar__text{
    color: #F52E67;
  }
}
.van-nav-bar__title,.van-nav-bar__text,.van-icon{
  color: #191E2A;
}
.van-button--danger{
  background: linear-gradient(to right, #FF6D74 , #F52E67, #FF5367); /* 标准的语法 */
  border: none;
  z-index: 1;
}
.van-button--primary{
  background: linear-gradient(to right, #FF6D74 , #F52E67, #FF5367); /* 标准的语法 */
  border: none;
}
.showEdit{
  width: 100%;
  height: 100%;
  z-index: 2;
}
.save-address{
  padding: 0.3rem 0 0 0;
  margin: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  .save{
    flex-grow: 1;
  }
}
.chose-address{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.area{
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 3;
}
.areaShadow{
  position: absolute;
  top:0;
  height: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 2;
}
</style>